<script setup lang="ts">
import { Gauge } from '@antv/g2plot';

import { onMounted, useTemplateRef, defineProps, watch } from 'vue';

const props = defineProps(['data'])

const cont = useTemplateRef('container')
let gauge = null

const thres = window.HIGH_RISK_THRESHOLD || 0.7

onMounted(() => {
  gauge = new Gauge(cont.value, {
    percent: 0,
    type: 'meter',
    innerRadius: 0.85,
    height: 140,
    range: {
      ticks: [0, thres, 1],
      color: ['#30BF78', '#F4664A'],
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    axis: {
      label: {
        formatter(v) {
          return Number(v) * 100;
        },
      },
      subTickLine: {
        count: 3,
      },
    },
    statistic: {
      content: {
        formatter: ({ percent }) => percent > thres ? '<span style="color:red">高风险</span>' : '<span style="color:green">低风险</span>',
        style: {
          fontSize: '18px',
          lineHeight: '86px',
          color: '#fff'
        },
      },
    },
  });
  gauge.render();
  // gauge.changeData(0.6)
})
watch(() => props.data, () => { console.log(props.data); gauge.changeData(props.data) })

</script>

<template>
  <div ref="container" style=""></div>
</template>
<style scoped>
* {
  color: white;
}
</style>
